import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Input, Select, Modal } from 'antd';
const { TextArea } = Input;
const FormItem = Form.Item;
import { connect } from 'dva';
import { ModalC } from '../../../comps';
@Form.create()
@connect(({ institutionConfigurationM, loading }) => ({ institutionConfigurationM, loading }))
export default class UpdataC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      initialValue: undefined, // 默认无初始化值
      principalList: [], //负责人下拉列表
    };
  }
  componentDidMount() {
    this.getPrincipalList(); //获取负责人下拉列表
  }

  //获取负责人下拉列表
  getPrincipalList = () => {
    this.props.dispatch({
      type: 'institutionConfigurationM/getPrincipalList',
      payload: {},
      callback: (data) => {
        this.setState({
          principalList: data,
        });
      },
    });
  };
  // 修改visible
  changeVisible = (msg) => {
    this.props.changeVisible(msg);
  };

  // 新增/编辑 模态框内容
  addForm = () => {
    const { getFieldDecorator } = this.props.form;
    const { editObj } = this.props;
    if (editObj.leaderId) {
      editObj.leaderId[0] == '' ? editObj.leaderId.splice(0, 1) : editObj.leaderId;
    } else {
      editObj.leaderId = [];
    }

    const formItemLayout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 18,
      },
    };
    return (
      <div>
        <Form>
          {/* ***************************第一行************************************* */}
          <Row>
            <Col span={24}>
              <FormItem label='机构名称' {...formItemLayout}>
                {getFieldDecorator('instNameModal', {
                  initialValue: this.props.isEdit ? this.props.editObj.instName : null,
                  rules: [{ required: true, message: '请输入机构名称' }],
                  getValueFromEvent: (event) => {
                    return event.target.value.replace(/\s+/g, '');
                  },
                })(<Input />)}
              </FormItem>
            </Col>
          </Row>
          {/* ***************************第二行************************************* */}
          <Row>
            <Col span={24}>
              <FormItem label='机构代码' {...formItemLayout}>
                {getFieldDecorator('instCode', {
                  initialValue: this.props.isEdit ? this.props.editObj.instCode : null,
                  getValueFromEvent: (event) => {
                    return event.target.value.replace(/\s+/g, '');
                  },
                })(<Input />)}
              </FormItem>
            </Col>
          </Row>
          {/* ***************************第三行************************************* */}
          <Row>
            <Col span={24}>
              <FormItem label='负责人' {...formItemLayout}>
                {getFieldDecorator('leaderNameModal', {
                  initialValue: this.props.isEdit ? editObj.leaderId : [],
                })(
                  <Select
                    mode='multiple'
                    allowClear
                    maxTagCount={1}
                    filterOption={(input, option) => {
                      return option.props.children.toLowerCase().indexOf(input.toLowerCase()) > -1;
                    }}
                  >
                    {this.state.principalList
                      ? this.state.principalList.map((item) => {
                          return <Select.Option key={item.userId}>{item.userId + '-' + item.name}</Select.Option>;
                        })
                      : null}
                  </Select>,
                )}
              </FormItem>
            </Col>
          </Row>
          {/* ***************************第三行************************************* */}
          <Row>
            <Col span={24}>
              <FormItem label='备注' {...formItemLayout}>
                {getFieldDecorator('descriptionModal', { initialValue: this.props.isEdit ? editObj.description : null })(<TextArea />)}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    );
  };
  // 新增账号确认
  addanOK = () => {
    const {
      form: { validateFields, resetFields },
    } = this.props;
    validateFields(['instNameModal', 'leaderNameModal', 'descriptionModal', 'instCode'], (err, fieldsValue) => {
      if (err) return;
      if (this.props.isEdit) {
        //修改状态下
        const value = {
          id: this.props.editObj.id ? this.props.editObj.id : undefined,
          instName: fieldsValue.instNameModal, //机构名称
          instCode: fieldsValue.instCode, //机构代码
          description: fieldsValue.descriptionModal, //备注
          createdBy: this.props.editObj.createBy,
          leaderId: fieldsValue.leaderNameModal.join(','), //负责人id
          pid: this.props.editObj.pid,
        };
        this.props.dispatch({
          type: 'institutionConfigurationM/editInstitutionById',
          payload: value,
          callback: (res) => {
            resetFields();

            this.props.useGetTableData();
            this.changeVisible(false);
          },
        });
      } else {
        // 新增状态下
        const value = {
          pid: this.props.editObj.id ? this.props.editObj.id : undefined,
          instName: fieldsValue.instNameModal, //机构名称
          instCode: fieldsValue.instCode, //机构代码
          description: fieldsValue.descriptionModal, //备注
          leaderId: fieldsValue.leaderNameModal.join(','),
          createdBy: this.props.editObj.createBy,
        };
        this.props.dispatch({
          type: 'institutionConfigurationM/addInstitution',
          payload: value,

          callback: (res) => {
            resetFields();

            this.props.useGetTableData();
            this.changeVisible(false);
          },
        });
      }
    });
  };
  // 新增账号取消
  addanCancel = () => {
    const {
      form: { resetFields },
    } = this.props;
    this.changeVisible(false);
    resetFields();
  };
  render() {
    return (
      <ModalC
        title={this.props.isEdit ? '编辑' : '添加'}
        visible={this.props.visible}
        maskClosable={false}
        onOk={this.addanOK}
        onCancel={this.addanCancel}
        confirmLoading={
          this.props.isEdit
            ? this.props.loading.effects['institutionConfigurationM/editInstitutionById'] == true
            : this.props.loading.effects['institutionConfigurationM/addInstitution'] == true
        }
        width={400}
      >
        <div>{this.addForm()}</div>
      </ModalC>
    );
  }
}
